<template>
	<div>
		<el-card
			class="box-card"
			:style="{background:color}"
		>
			<div
				slot="header"
				class="clearfix setFlex"
			>
				<el-tag type="danger">{{title}}</el-tag>
				<div class="block">
					<el-tooltip
						class="item"
						effect="dark"
						content="更改背景色"
						placement="top-end"
					>
						<el-color-picker
							v-model="color"
                            size="mini"
							show-alpha
						></el-color-picker>
					</el-tooltip>
				</div>
			</div>
			<div
				id="custom-profile"
				class="chart"
			></div>
		</el-card>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		name: "XNFXT",
		data() {
			return {
				title: "当前显示： 性能分析图组件",
				color: "#FFFFFF",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.drawLine();
			});
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById("custom-profile"));
				var data = [];
				var dataCount = 10;
				var startTime = +new Date();
				var categories = ["categoryA", "categoryB", "categoryC"];
				var types = [
					{ name: "JS Heap", color: "#7b9ce1" },
					{ name: "Documents", color: "#bd6d6c" },
					{ name: "Nodes", color: "#75d874" },
					{ name: "Listeners", color: "#e0bc78" },
					{ name: "GPU Memory", color: "#dc77dc" },
					{ name: "GPU", color: "#72b362" },
				];

				// Generate mock data
				categories.forEach(function (category, index) {
					var baseTime = startTime;
					for (var i = 0; i < dataCount; i++) {
						var typeItem = types[Math.round(Math.random() * (types.length - 1))];
						var duration = Math.round(Math.random() * 10000);
						data.push({
							name: typeItem.name,
							value: [index, baseTime, (baseTime += duration), duration],
							itemStyle: {
								normal: {
									color: typeItem.color,
								},
							},
						});
						baseTime += Math.round(Math.random() * 2000);
					}
				});

				function renderItem(params, api) {
					var categoryIndex = api.value(0);
					var start = api.coord([api.value(1), categoryIndex]);
					var end = api.coord([api.value(2), categoryIndex]);
					var height = api.size([0, 1])[1] * 0.6;

					var rectShape = echarts.graphic.clipRectByRect(
						{
							x: start[0],
							y: start[1] - height / 2,
							width: end[0] - start[0],
							height: height,
						},
						{
							x: params.coordSys.x,
							y: params.coordSys.y,
							width: params.coordSys.width,
							height: params.coordSys.height,
						}
					);

					return (
						rectShape && {
							type: "rect",
							transition: ["shape"],
							shape: rectShape,
							style: api.style(),
						}
					);
				}

				let option = {
					tooltip: {
						formatter: function (params) {
							return params.marker + params.name + ": " + params.value[3] + " ms";
						},
					},
					title: {
						text: "Profile",
						left: "center",
					},
					dataZoom: [
						{
							type: "slider",
							filterMode: "weakFilter",
							showDataShadow: false,
							top: 400,
							labelFormatter: "",
						},
						{
							type: "inside",
							filterMode: "weakFilter",
						},
					],
					grid: {
						height: 300,
					},
					xAxis: {
						min: startTime,
						scale: true,
						axisLabel: {
							formatter: function (val) {
								return Math.max(0, val - startTime) + " ms";
							},
						},
					},
					yAxis: {
						data: categories,
					},
					series: [
						{
							type: "custom",
							renderItem: renderItem,
							itemStyle: {
								opacity: 0.8,
							},
							encode: {
								x: [1, 2],
								y: 0,
							},
							data: data,
						},
					],
				};
				// 绘制图表
				myChart.setOption(option);
			},
		},
	};
</script>

<style lang="css" scoped>
</style>